import React, {useState,} from 'react'
import {withRouter,} from 'react-router-dom'
import {connect} from 'react-redux'
import GoBackLayout from "../../../../layouts/GoBackLayout/GoBackLayout"
import FormInput from "../../../../shared-components/FormInput/FormInput"
import {WingBlank} from "antd-mobile"
import CustomButton from "../../../../shared-components/CustomButton/CustomBotton"

const LiveRoomName = props => {
    const {
        history,
        roomname,
        doSaveRoomName,
    } = props

    const [roomName, setRoomName,] = useState(roomname)

    const submitRoomName = roomName => {
        doSaveRoomName(roomName)
        history.goBack()
    }

    const input = (
        <WingBlank>
            <FormInput
                placeholder={roomName}
                value={roomName}
                onChange={(e) => setRoomName(e.target.value)}
            />
        </WingBlank>
    )

    return <GoBackLayout
        title='房间名称'
        history={history}
    >
        <div className='full-width-fff-background'>
            {input}
        </div>
        <WingBlank>
            <p className='tips mg-b-4'>
                提示：我们将尽快审核您提交的新名称。如需要再次修改名称，请在审核通过十分钟后操作。
            </p>
            <CustomButton
                shadow='0px 6px 10px 0px rgba(250,114,104,0.4)'
                onClick={() => submitRoomName(roomName)}
            >
                保存
            </CustomButton>
        </WingBlank>
    </GoBackLayout>
}

const mapState = (state) => ({
    roomName: state.star.roomname,
})

const mapDispatch = (dispatch) => ({
    doSaveRoomName: payload => dispatch.star.doSaveRoomName(payload),
})

export default connect(mapState, mapDispatch)(withRouter(LiveRoomName))
